<template>
    <nav class="msite_nav">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item,index) of categorysArr" :key="index">
             <a href="javascript:" class="link_to_food" v-for="(val,index) of item" :key="index">
                <div class="food_container">
                  <img :src="imgBaseUrl+val.image_url" />
                </div>
                <span>{{val.title}}</span>
              </a>
            </div>
          
          </div>
          <!-- Add Pagination -->
          <div class="swiper-pagination"></div>
        </div>
      </nav>
</template>

<script>

// 引入我们的swpipe插件
import Swiper from "swiper";
// 引入css
import "swiper/css/swiper.min.css";

// 引入映射 
import {mapState} from 'vuex'
export default {
    props: {
        
    },
    data() {
        return {
          imgBaseUrl: 'https://fuss10.elemecdn.com'
        };
    },
    computed: {
       ...mapState(['categorys']),
       categorysArr(){
          let bigArr = []
          let smallArr = []
          let max=8
          let {categorys} = this //指向vue实例对象 vue实例对象里面就有这个值
          categorys.forEach(v => {
              if (smallArr.length==0) {
                  bigArr.push(smallArr) //第一次[[]] 第二次的时候[[8],[]]
              }
              smallArr.push(v)
              if (smallArr.length==max) {
                  smallArr = []
              }
          });
          
          return bigArr
       }
    },
    created() {

    },
    mounted() {
      //dom 才可以拿到数据 应该要等页面的所有的轮播图都渲染完成后才能进行轮播
         /* var mySwiper = new Swiper(".swiper-container", {
            //   direction: "vertical", // 垂直切换选项
            loop: true, // 循环模式选项

            // 如果需要分页器
            pagination: {
                el: ".swiper-pagination"
            }
        }); */
    },
    watch: {
        categorys(newVal,oldVal){
          if (newVal) { //当categorys有数据后
              // 执行$nextTick这个钩子函数(将回调延迟到下次dom更新循环之后执行。在修改数据之后立刻使用它，然后等待dom更新)
              // 当页面数据更新渲染之后这个函数才会调用
              this.$nextTick(v=>{
                var mySwiper = new Swiper(".swiper-container", {
                    //   direction: "vertical", // 垂直切换选项
                    loop: true, // 循环模式选项

                    // 如果需要分页器
                    pagination: {
                        el: ".swiper-pagination"
                    }
                }); 
              })
          }
        }
    },
    methods: {

    },
    components: {

    },
};
</script>

<style scoped lang='stylus' >
@import '../../common/stylus/mixins';
     .msite_nav
            bottom-border-1px(#e4e4e4)
            margin-top 45px
            height 200px
            background #fff
            .swiper-container
              width 100%
              height 100%
              .swiper-wrapper
                width 100%
                height 100%
                .swiper-slide
                  display flex
                  justify-content center
                  align-items flex-start
                  flex-wrap wrap
                  .link_to_food
                    width 25%
                    .food_container
                      display block
                      width 100%
                      text-align center
                      padding-bottom 10px
                      font-size 0
                      img
                        display inline-block
                        width 50px
                        height 50px
                    span
                      display block
                      width 100%
                      text-align center
                      font-size 13px
                      color #666
              .swiper-pagination
                >span.swiper-pagination-bullet-active
                  background #02a774
</style>
